import { Button, Table, Form, Input, message } from 'antd'
import ModalBox from '../../../components/modalBox'
import { useNavigate } from "react-router-dom";
import { useState, useEffect } from 'react';
import { service } from '../../../api/url.js'
import store from '../../../store/store.js'
import AppRight from './appRight'
import dayjs from 'dayjs';
import CryptoJS from "crypto-js";
const { TextArea } = Input;
function AppRightList(props) {
    const navigate  = useNavigate();
    const _state = store.getState()
    const [form] = Form.useForm();
    const [messageApi, contextHolder] = message.useMessage();
    const [showRightList, setShowRightList] = useState('')
    const [dataSource, setDataSource] = useState([])
    const [total, setTotal] = useState(0)
    const success = (msg) => {
        messageApi.open({
            type: 'success',    
            content: msg,
        });
    };
    const error = (msg) => {
        messageApi.open({
            type: 'error',
            content: msg,
        });
    };
    const columns = [
        {
            title: '序号',
            width: '5%',
            align: 'center',
            render: (text, record, index) => {
                return index + 1
            }
        },
        {
            title: '应用名称',
            dataIndex: 'projectName',
            key: 'projectName',
            align: 'center',
        },
        {
            title: 'Appid',
            dataIndex: 'projectId',
            key: 'projectId',
            width: '15%',
            align: 'center',
        },
        {
            title: '应用状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
        },
        {
            title: '创建者',
            dataIndex: 'author',
            key: 'author',
            align: 'center',
        },
        {
            title: '我的角色',
            dataIndex: 'identity',
            align: 'center',
            render: (text, record, index) => {
                switch (record.identity) {
                    case '1':
                        return (<>普通用户</>)
                    case '2':
                        return (<>管理员</>)
                    case '3':
                        return (<>所有者</>)
                    case '4':
                        return (<>创建者</>)
                }
            }
        },
        {
            title: '创建日期',
            dataIndex: 'createTime',
            key: 'createTime',
            width: '15%',
            align: 'center',
            render: (text, record, index) => {
                return(<>{record['createTime'] ? dayjs(record['createTime']).format('YYYY-MM-DD HH:mm:ss') : ''}</>)
            }
        },
        {
            title: '操作',
            width: '15%',
            align: 'center',
            render: (text, record, index) => {
                return (
                    <div>
                        <Button type="primary" style={{marginRight: '10px'}} onClick={() => {navigate(`/?appid=${record.projectId}&_au=${CryptoJS.AES.encrypt(record.author, 'zhanle')}`);setShowRightList('list')}}>用户授权</Button>
                    </div>
                )
            }
        }
    ]
    // 获取项目列表
    const getProjectUser = () => {
        const params = {
            pageNum: 1,
            pageSize: 10,
            phone: _state.userInfo.phone
        }
        service.getProjectIsManage(params).then(res => {
            if (res.data.status === 1) {
                setDataSource(res.data.data.list)
                setTotal(res.data.data.total)
                success(res.data.msg)
            } else {
                error(res.data.msg)
            }
        })
    }
    const onSave = () => {
        
    }
    const onCancle = () => {
        
    }
    useEffect(() => {
        getProjectUser()
    }, [])
    if (showRightList === 'list') {
        return (
            <>
                <AppRight onBack={() => {navigate('/');setShowRightList('')}}></AppRight>
            </>
        )
    }
    return (
        <div className="user-manage">
            <div className="table-header">
                <h3>用户列表</h3>
            </div>
            <div className="table-container">
                <Table bordered dataSource={dataSource} columns={columns} scroll={{y: 710}}/>
            </div>
        </div>
    )
}

export default AppRightList